<template>
  <a-modal
    :title="title"
    :width="900"
    :height="1000"
    :visible="visible"
    :bodyStyle="bodyStyle"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
    wrapClassName="ant-modal-cust-warp"
    style="top:5%;height: 70%;overflow-y: hidden"
  >
    <template slot="footer">
      <a-button key="back" @click="handleCancel">
        关闭
      </a-button>
      <a-button type="success" v-print="'#printMe'" @click="print">
        打印
      </a-button>
    </template>
    <a-spin :spinning="confirmLoading">
      <div v-if="record.stageB == 5 && this.$router.currentRoute.name == '二级审批'" id="printMe">
        <h3>合同评审记录表(二级)</h3>
        <a-descriptions :title="`内部编码：${record.contractCode}`" bordered>
          <a-descriptions-item label="客户名称">
            {{ record.customerName }}
          </a-descriptions-item>
          <a-descriptions-item label="评审时间" :span="2">
            {{ this.$moment(record.updateTime).format('YYYY-MM-DD') }}
          </a-descriptions-item>
          <a-descriptions-item label="合同号" :span="3">
            {{ record.contractNum }}
          </a-descriptions-item>
          <a-descriptions-item label="销售部" :span="2">
            {{ getData[0] ? getData[0].content : '' }}
          </a-descriptions-item>
          <a-descriptions-item label="评审部门人员签字"> </a-descriptions-item>
          <a-descriptions-item label="生产部" :span="2">
            {{ getData[1] ? getData[1].content : '' }}
          </a-descriptions-item>
          <a-descriptions-item label="评审部门人员签字"> </a-descriptions-item>
          <a-descriptions-item label="评审结论" :span="3">
            {{ getData[2] ? getData[2].content : '' }}
          </a-descriptions-item>
          <a-descriptions-item label="审批意见" :span="3">
            {{ getData[3] ? getData[3].content : '' }}
          </a-descriptions-item>
        </a-descriptions>
      </div>
      <div id="printMe" v-else>
        <h3>合同评审记录表</h3>
        <a-descriptions :title="`内部编码：${record.contractCode}`" bordered>
          <a-descriptions-item label="客户名称">
            {{ record.customerName }}
          </a-descriptions-item>
          <a-descriptions-item label="评审时间" :span="2">
            {{ this.$moment(record.updateTime).format('YYYY-MM-DD') }}
          </a-descriptions-item>
          <a-descriptions-item label="合同号" :span="3">
            {{ record.contractNum }}
          </a-descriptions-item>
          <a-descriptions-item label="销售部" :span="2">
            {{ getData[1] ? getData[1].content : '' }}
          </a-descriptions-item>
          <a-descriptions-item label="评审部门人员签字"> </a-descriptions-item>
          <a-descriptions-item label="技术部" :span="2">
            {{ getData[2] ? getData[2].content : '' }}
          </a-descriptions-item>
          <a-descriptions-item label="评审部门人员签字"> </a-descriptions-item>
          <a-descriptions-item label="质检部" :span="2">
            {{ getData[3] ? getData[3].content : '' }}
          </a-descriptions-item>
          <a-descriptions-item label="评审部门人员签字"> </a-descriptions-item>
          <a-descriptions-item label="生产部" :span="2">
            {{ getData[4] ? getData[4].content : '' }}
          </a-descriptions-item>
          <a-descriptions-item label="评审部门人员签字"> </a-descriptions-item>
          <a-descriptions-item label="采购部" :span="2">
            {{ getData[5] ? getData[5].content : '' }}
          </a-descriptions-item>
          <a-descriptions-item label="评审部门人员签字"> </a-descriptions-item>
          <a-descriptions-item label="评审结论" :span="3">
            {{ getData[6] ? getData[6].content : '' }}
          </a-descriptions-item>
          <a-descriptions-item label="审批意见" :span="3">
            {{ getData[7] ? getData[7].content : '' }}
          </a-descriptions-item>
        </a-descriptions>
      </div>
    </a-spin>
  </a-modal>
</template>
<script>
import { getAction } from '@/api/manage'
export default {
  name: 'PrintPage',
  data() {
    return {
      visible: false,
      confirmLoading: false,
      title: '审批流程表',
      record: '',
      getData: [],
      bodyStyle: {
        padding: '20',
        'overflow-y': 'auto'
      }
    }
  },
  mounted() {},
  methods: {
    print() {
      // window.print() // 打印
      let subOutputRankPrint = document.getElementById('print')
      let newContent = subOutputRankPrint.innerHTML
      let oldContent = document.body.innerHTML
      document.body.innerHTML = newContent
      window.print()
      document.body.innerHTML = oldContent
      return false
    },
    handleOpen(record) {
      this.visible = true
      this.getDataFlow(record)
    },
    handleCancel() {
      this.visible = false
    },
    getDataFlow(record) {
      this.record = record
      let params = {
        approvalStage: this.$router.currentRoute.name == '一级审批' ? '1' : '2',
        approvalId: record.id
      }
      getAction('/contractApprovalData/listByCriteria', params).then(res => {
        console.log('record', this.record)
        this.getData = res.data
        console.log(res.data)
      })
    },
    handleOk() {}
  }
}
</script>
<style lang="less" scoped>
.ant-descriptions-title {
  margin: 0 auto;
}
h3 {
  text-align: center;
  margin: 0 auto;
  font-weight: 800;
}
@media print {
  .print {
    display: block;
  }
}
</style>
